import React, { Component } from "react";
import Message from "./Message";
import News from "./News";
import MyNavLink from "../../components/MyNavLink";
import { Navigate, Route, Routes } from "react-router-dom";

export default class Home extends Component {
    render() {
        return (
            <div>
                <h3>Home</h3>
                <div>
                    <ul className="nav nav-tabs">
                        <li>
                            <MyNavLink to="news">News</MyNavLink>
                        </li>
                        <li>
                            <MyNavLink to="message">Message</MyNavLink>
                        </li>
                    </ul>
                    {/* 注册路由 */}
                    <Routes>
                        <Route path="news" element={<News />} />
                        <Route path="message/*" element={<Message />} />
                        <Route path="" element={<Navigate to="news" />} />
                    </Routes>
                </div>
            </div>
        );
    }
}
